<template>
  <div>
    <div style=" float:left;">
      <el-table
        :data="tableData"
        style="width: 600px"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
      </el-table>
    </div>
    <div>
      <el-transfer v-model="value" :data="data" />
    </div>
  </div>
</template>

<script>
export default {

  data() {
    // 初始化data数据
    const generateData = _ => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: false
        })
      }
      return data
    }

    return {
      data: generateData(), // 全部数据
      value: [1, 4], // 已选中的数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]

    }
  },
  methods: {
    handleCurrentChange(val) {
      // 当前行 拿到id
      console.log(val)
    },
    // 传入handleCurrentChange 获取的id
    getList(id) {
      // 根据id获取到数据 = this.value
    }
  }

}
</script>

<style>

</style>
